<template>
  <div>
    <h1>父亲</h1>
    <!-- <Child :message="message" @changeMessage="message = $event" /> -->
    <!-- <Child :message="message" :changeMsgFn="changeMessage" /> -->
    <!-- <button @click="changeChildNumber">按钮</button> -->
    <!-- <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <Child :name="name" :age="age" @changeName="changeName" /> -->
    <Child ref="childComp" />
    <button @click="changeName">按钮</button>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  methods: {
    changeName() {
      console.log('点击前', this.$refs.childComp.age);
      this.$refs.childComp.changeAge();
      console.log('点击后', this.$refs.childComp.age);
    }
  },
  watch: {
    'this.$refs.childComp.age'() {
      console.log(1);
    }
  },
  components: {
    Child,
  },
};
</script>

<style></style>
